<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			div {
				height: 200px;
			}

			body {
				min-width: 600px;
			}

			.left {
				width: 200px;
				background: pink;
				float: left;
				/* opacity: 0; */
			}

			.right {
				background: deeppink;
				/* float: left; */
				overflow: hidden;
				
				/*
				文字太多，自动显示省略号。
				这三条css必须同时使用。
				*/
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			#wrap {
				width: 600px;
				border: 1px solid;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<!-- 
		这里利用了bfc的规则 
		BFC的区域不会与float box重叠
		overflow为hidden，那么就生成了right的BFC。这样right就不会和left这个浮动元素重叠，在left下面的部分就隐藏。
		-->
		<!-- 
		H:\尚硅谷前端学科全套教程\1.前端学科--基础阶段\尚硅谷css2.1教程\视频\15.尚硅谷_css2.1_BFC实现两列布局
		-->
		<div id="wrap">
			<div class="left">left</div>
			<div class="right">
				right
			</div>
		</div>
	</body>
</html>
